<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home' }">时光源</el-breadcrumb-item>
        <el-breadcrumb-item>欢迎</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="homeImage">
      <!-- <img src="./homeImage.png" alt="" /> -->

      <!--  用户总数  日活跃量     -->
      <el-row>
        <el-col :span="6" :gutter="10" style="margin-bottom: 40px">

          <el-col>
            <div @click="toUser">
              <el-card style="color: #409EFF">
                <div><i class="el-icon-user-solid" />用户总数</div>
                <div style="padding: 10px 0; text-align: center;font-weight: bold;">
                  {{ totalUsers }}
                </div>
              </el-card>
            </div>
          </el-col>
          <el-col style="margin-top: 25px;">
            <el-card style="color: #E6A23C">
              <div><i class="el-icon-odometer" /> 活跃用户总数</div>
              <div style="padding: 10px 0; text-align: center;font-weight: bold">
                {{ activeUsers }}
              </div>
            </el-card>
          </el-col>
          <el-col style="margin-top: 25px;">
            <el-card style="color: #67C23A">
              <div><i class="el-icon-loading" />热度</div>
              <div style="padding: 10px 0; text-align: center;font-weight: bold">
                {{ dailyActivity }}
              </div>
            </el-card>
          </el-col>
          <el-col style="margin-top: 25px;">
            <el-card style="color: #F56C6C">
              <div><i class="el-icon-data-analysis" />浏览之星(前三)</div>
              <div style="padding: 10px 0; text-align: center;font-weight: bold">
                {{ hotVideo }}
              </div>
            </el-card>
          </el-col>
        </el-col>

        <!-- 以上四个属性各用一条折线表示 -->
        <!--折线柱状图-->
        <el-col :span="12" style="margin-left: 200px;">
          <div id="main" style="width: 700px; height: 450px"></div>
        </el-col>
      </el-row>

      <el-row>


        <!--中国地图-->
        <div style="margin-top: 100px">
          <div id="title">
            <h1>全国用户分布情况：</h1>
          </div>
          <div>
            <div>
      <div id="map" style="width:100vw;height:100vh;" ref="map"></div>

   </div>
          </div>
        </div>

      </el-row>

    </div>
  </el-card>
</template>

<script>
import * as echarts from "echarts";
import chinaJson from "../../assets/china.json";

export default {
  name: "Home",
  props: {
    className: {
      type: String,
      default: "chart",
    },
    width: {
      type: String,
      default: "100%",
    },
  },
  data() {
    return {
      totalUsers: '',//用户总数
      activeUsers: '',//活跃用户总数
      dailyActivity: '',//热度
      hotVideo: '',//浏览之星
      //地图数据
    }
  },
  methods: {

    /**
     * 折线图
     */
    toUser() {
      this.$router.push('/user');
    },

    /**
     * 中国地图
     */
    this.$echarts.registerMap("china", chinaJson);
    let myChart = this.$echarts.init(this.$refs.map);
    this.$nextTick(() => {
      var mapName = "china";
      var data = [
        { name: "北京", value: 177 },
        { name: "天津", value: 42 },
        { name: "河北", value: 102 },
        { name: "山西", value: 81 },
        { name: "内蒙古", value: 47 },
        { name: "辽宁", value: 67 },
        { name: "吉林", value: 82 },
        { name: "黑龙江", value: 66 },
        { name: "上海", value: 24 },
        { name: "江苏", value: 92 },
        { name: "浙江", value: 114 },
        { name: "安徽", value: 109 },
        { name: "福建", value: 116 },
        { name: "江西", value: 91 },
        { name: "山东", value: 119 },
        { name: "河南", value: 137 },
        { name: "湖北", value: 116 },
        { name: "湖南", value: 114 },
        { name: "重庆", value: 91 },
        { name: "四川", value: 125 },
        { name: "贵州", value: 62 },
        { name: "云南", value: 83 },
        { name: "西藏", value: 9 },
        { name: "陕西", value: 80 },
        { name: "甘肃", value: 56 },
        { name: "青海", value: 10 },
        { name: "宁夏", value: 18 },
        { name: "新疆", value: 67 },
        { name: "广东", value: 123 },
        { name: "广西", value: 59 },
        { name: "海南", value: 14 }
      ];
      var geoCoordMap = {};
      var toolTipData = [
        {
          name: "北京",
          value: [{ name: "文科", value: 95 }, { name: "理科", value: 82 }]
        },
        {
          name: "天津",
          value: [{ name: "文科", value: 22 }, { name: "理科", value: 20 }]
        },
        {
          name: "河北",
          value: [{ name: "文科", value: 60 }, { name: "理科", value: 42 }]
        },
        {
          name: "山西",
          value: [{ name: "文科", value: 40 }, { name: "理科", value: 41 }]
        },
        {
          name: "内蒙古",
          value: [{ name: "文科", value: 23 }, { name: "理科", value: 24 }]
        },
        {
          name: "辽宁",
          value: [{ name: "文科", value: 39 }, { name: "理科", value: 28 }]
        },
        {
          name: "吉林",
          value: [{ name: "文科", value: 41 }, { name: "理科", value: 41 }]
        },
        {
          name: "黑龙江",
          value: [{ name: "文科", value: 35 }, { name: "理科", value: 31 }]
        },
        {
          name: "上海",
          value: [{ name: "文科", value: 12 }, { name: "理科", value: 12 }]
        },
        {
          name: "江苏",
          value: [{ name: "文科", value: 47 }, { name: "理科", value: 45 }]
        },
        {
          name: "浙江",
          value: [{ name: "文科", value: 57 }, { name: "理科", value: 57 }]
        },
        {
          name: "安徽",
          value: [{ name: "文科", value: 57 }, { name: "理科", value: 52 }]
        },
        {
          name: "福建",
          value: [{ name: "文科", value: 59 }, { name: "理科", value: 57 }]
        },
        {
          name: "江西",
          value: [{ name: "文科", value: 49 }, { name: "理科", value: 42 }]
        },
        {
          name: "山东",
          value: [{ name: "文科", value: 67 }, { name: "理科", value: 52 }]
        },
        {
          name: "河南",
          value: [{ name: "文科", value: 69 }, { name: "理科", value: 68 }]
        },
        {
          name: "湖北",
          value: [{ name: "文科", value: 60 }, { name: "理科", value: 56 }]
        },
        {
          name: "湖南",
          value: [{ name: "文科", value: 62 }, { name: "理科", value: 52 }]
        },
        {
          name: "重庆",
          value: [{ name: "文科", value: 47 }, { name: "理科", value: 44 }]
        },
        {
          name: "四川",
          value: [{ name: "文科", value: 65 }, { name: "理科", value: 60 }]
        },
        {
          name: "贵州",
          value: [{ name: "文科", value: 32 }, { name: "理科", value: 30 }]
        },
        {
          name: "云南",
          value: [{ name: "文科", value: 42 }, { name: "理科", value: 41 }]
        },
        {
          name: "西藏",
          value: [{ name: "文科", value: 5 }, { name: "理科", value: 4 }]
        },
        {
          name: "陕西",
          value: [{ name: "文科", value: 38 }, { name: "理科", value: 42 }]
        },
        {
          name: "甘肃",
          value: [{ name: "文科", value: 28 }, { name: "理科", value: 28 }]
        },
        {
          name: "青海",
          value: [{ name: "文科", value: 5 }, { name: "理科", value: 5 }]
        },
        {
          name: "宁夏",
          value: [{ name: "文科", value: 10 }, { name: "理科", value: 8 }]
        },
        {
          name: "新疆",
          value: [{ name: "文科", value: 36 }, { name: "理科", value: 31 }]
        },
        {
          name: "广东",
          value: [{ name: "文科", value: 63 }, { name: "理科", value: 60 }]
        },
        {
          name: "广西",
          value: [{ name: "文科", value: 29 }, { name: "理科", value: 30 }]
        },
        {
          name: "海南",
          value: [{ name: "文科", value: 8 }, { name: "理科", value: 6 }]
        }
      ];

      /*获取地图数据*/
      let myChart = this.$echarts.init(document.getElementById("map"));
      // myChart.showLoading();
      var mapFeatures = this.$echarts.getMap(mapName).geoJson.features;
      // myChart.hideLoading();
      mapFeatures.forEach(function(v) {
        // 地区名称
        var name = v.properties.name;
        // 地区经纬度
        geoCoordMap[name] = v.properties.cp;
      });
      // console.log(data);
      // console.log(toolTipData);
      var max = 480,min = 9; // todo
      var maxSize4Pin = 100,minSize4Pin = 20;

      var convertData = function(data) {
        var res = [];
        for (var i = 0; i < data.length; i++) {
          var geoCoord = geoCoordMap[data[i].name];
          if (geoCoord) {
            res.push({
              name: data[i].name,
              value: geoCoord.concat(data[i].value)
            });
          }
        }
        return res;
      };
      var option = {
        tooltip: {
          trigger: "item",
          formatter: function(params) {
            if (typeof params.value[2] == "undefined") {
              var toolTiphtml = "";
              for (var i = 0; i < toolTipData.length; i++) {
                if (params.name == toolTipData[i].name) {
                  toolTiphtml += toolTipData[i].name + ":<br>";
                  for (var j = 0; j < toolTipData[i].value.length; j++) {
                    toolTiphtml +=
                      toolTipData[i].value[j].name +
                      ":" +
                      toolTipData[i].value[j].value +
                      "<br>";
                  }
                }
              }
              // console.log(toolTiphtml);
              console.log(convertData(data))
              return toolTiphtml;
            } else {
              var toolTiphtml = "";
              for (var i = 0; i < toolTipData.length; i++) {
                if (params.name == toolTipData[i].name) {
                  toolTiphtml += toolTipData[i].name + ":<br>";
                  for (var j = 0; j < toolTipData[i].value.length; j++) {
                    toolTiphtml +=
                      toolTipData[i].value[j].name +
                      ":" +
                      toolTipData[i].value[j].value +
                      "<br>";
                  }
                }
              }
              console.log(toolTiphtml);
              // console.log(convertData(data))
              return toolTiphtml;
            }
          }
        },
        //这个属性控制地图的多彩板块
        visualMap: {
          show: true,
          min: 0,
          max: 200,
          left: 400,
          bottom: 200,
          text: ["高", "低"], // 文本，默认为数值文本
          calculable: true,
          seriesIndex: [1],
          inRange: {
            // color: ['#3B5077', '#031525'] // 蓝黑
            // color: ['#ffc0cb', '#800080'] // 红紫
            // color: ['#3C3B3F', '#605C3C'] // 黑绿
            // color: ['#0f0c29', '#302b63', '#24243e'] // 黑紫黑
            // color: ['#23074d', '#cc5333'] // 紫红
            color: ["#00467F", "#A5CC82"] // 蓝绿
            // color: ['#1488CC', '#2B32B2'] // 浅蓝
            // color: ['#00467F', '#A5CC82'] // 蓝绿
            // color: ['#00467F', '#A5CC82'] // 蓝绿
            // color: ['#00467F', '#A5CC82'] // 蓝绿
            // color: ['#00467F', '#A5CC82'] // 蓝绿
          }
        },
        geo: {
          show: true,
          map: mapName,
          label: {
            normal: {
              show: false
            },
            emphasis: {
              show: false
            }
          },
          roam: true,
          itemStyle: {
            normal: {
              areaColor: "#031525",
              borderColor: "#3B5077"
            },
            emphasis: {
              areaColor: "#2B91B7"
            }
          }
        },
        series: [
        //1）全省的散点
          {
            name: "散点",
            type: "scatter",
            coordinateSystem: "geo",
            data: convertData(data),
            symbolSize: function(val) {
              return val[2] / 10;
            },
            label: {
              normal: {
                formatter: "{b}",
                position: "right",
                show: true
              },
              emphasis: {
                show: true
              }
            },
            itemStyle: {
              normal: {
                color: "#05C3F9"
              }
            }
          },
          // 2）为了与visualMap配对，必须要加上
          {
            type: "map",
            map: mapName,
            geoIndex: 0,
            aspectScale: 0.75, //长宽比
            showLegendSymbol: false, // 存在legend时显示
            label: {
              normal: {
                show: true
              },
              emphasis: {
                show: false,
                textStyle: {
                  color: "#fff"
                }
              }
            },
            roam: true,
            itemStyle: {
              normal: {
                areaColor: "#031525",
                borderColor: "#3B5077"
              },
              emphasis: {
                areaColor: "#2B91B7"
              }
            },
            animation: false,
            data: data
          },
          //3）气泡
          {
            name: "点",
            type: "scatter",
            coordinateSystem: "geo",
            symbol: "pin", //气泡
            symbolSize: function(val) {
              var a = (maxSize4Pin - minSize4Pin) / (max - min);
              var b = minSize4Pin - a * min;
              b = maxSize4Pin - a * max;
              return a * val[2] + b;
            },
            label: {
              normal: {
                show: true,
                textStyle: {
                  color: "#fff",
                  fontSize: 9
                }
              }
            },
            itemStyle: {
              normal: {
                color: "#F62157" //标志颜色
              }
            },
            zlevel: 6,
            data: convertData(data)
          },
          //4.前五个有效果的光圈
          {
            name: "Top 5",
            type: "effectScatter",
            coordinateSystem: "geo",
            data: convertData(
              data
                .sort(function(a, b) {
                  return b.value - a.value;
                })
                .slice(0, 5)
            ),
            symbolSize: function(val) {
              return val[2] / 10;
            },
            showEffectOn: "render",
            rippleEffect: {
              brushType: "stroke"
            },
            hoverAnimation: true,
            label: {
              normal: {
                formatter: "{b}",
                position: "right",
                show: true
              }
            },
            itemStyle: {
              normal: {
                color: "yellow",
                shadowBlur: 10,
                shadowColor: "yellow"
              }
            },
            zlevel: 1
          }
        ]
      };
      myChart.setOption(option);
    });
————————————————
版权声明：本文为CSDN博主「口袋の的天空」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_39928481/article/details/123872116


  },
  mounted() {//页面中的元素渲染之后才会触发这里

    /*
    * 折线图
    * */
    var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom);
    var option = {
      title: {
        text: '时光源运营情况预览',
        subtext: '',
        left: 'center'
      },
      xAxis: {
        type: 'category',
        // X轴坐标
        data: []
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          // 折线  用户总数
          data: [50, 23, 24, 280, 170, 107, 60],
          type: 'line',
          lineStyle: {
            color: "rgb(64,158,255)"
          }
        },
        {
          // 折线  热度
          data: [10, 30, 22, 200, 100, 47, 160],
          type: 'line',
          lineStyle: {
            color: "rgb(103,194,58)"
          }
        },
        {
          // 折线  浏览之星
          data: [150, 230, 224, 218, 135, 147, 260],
          type: 'line',
          lineStyle: {
            color: "rgb(245,108,108)"
          }
        },
        {
          // 柱形图
          data: [50, 230, 224, 218, 135, 147, 260],
          type: 'bar',
          itemStyle: {
            normal: {
              //这里是重点
              color: "rgb(230,162,60)"
            }
          }
        }
      ]
    };
    //发送请求到后端请求数据
    // this.request.get("/echarts/members").then(res => {
    //   if (res.state == 200) {
    //     //将后端得到的数据放入数组中
    //     // console.log(res)
    //     option.series[1].data = res.data.Y[0]
    //     option.series[0].data = res.data.Y[0]
    //     option.xAxis.data = res.data.X
    //     option.title.subtext = res.data.title
    //     this.totalUsers = res.data.totalUsers
    // console.log(option.subtext)
    //数据准备完毕后在set
    myChart.setOption(option);
    //   }

    // })

    /**
       * 中国地图
       */
    this.drawLine();
    this.request.get("/admin/getNewestIp").then(res => {
      console.log(res)
      if (res.state === 200) {
        let cnt = 0
        let data = []
        for (let i = 0; i < res.data.length; i++) {
          data.push({ name: res.data[i].name, value: res.data[i].value, perf: 0 })
          cnt += res.data[i].value
        }
        for (let i = 0; i < data.length; i++) {
          let p = data[i].value / cnt * 100
          data[i].perf = p.toString().substring(0, 5) + '%'
        }
        this.series_data = data
        this.drawLine();
      }
    })

  },





}

</script>

<style lang="less" scoped>
#title {
  text-align: center;
  color: #636060;
}

.homeImage {
  text-align: center;
}

.charts {
  min-height: 512px;
  min-width: 800px;


}

.charts:first-child div {
  position: static !important;
  width: 100% !important;
}

/deep/ canvas {
  width: 100% !important;
  height: 100% !important;
}
</style>
